<template>
  <el-dialog
    title="选择跟进人"
    :visible.sync="followDialogVisible"
    :before-close="FollowCloseDialog"
    width="800px"
    class="gl_dialog_TitleLine gl_dl_footer"
  >
    <el-form :model="search" size="mini" @submit.native.prevent>
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item>
            <el-input v-model="search.Filter" clearable placeholder="请输入跟进人账号或姓名" @keyup.enter.native="getFollowPerson()" @clear="getFollowPerson()" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" size="mini" @click="getFollowPerson()">筛选</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" class="gl_mb_15 gl_table_noBorder" size="mini" style="width: 100%">
      <el-table-column prop="phoneNumber" label="账号" min-width="150" />
      <el-table-column prop="name" label="姓名" min-width="120" />
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" @click="choose(row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row style="text-align: right;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :pager-count="5"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="search.MaxResultCount"
        :current-page="search.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
  </el-dialog>
</template>

<script>
import { Api_GET_ClubEmployeeQO } from '@/lib/form/hall/swaggerForm';
import { api_GET_ClubEmployee } from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      followDialogVisible: false,
      search: new Api_GET_ClubEmployeeQO(),
      total: 0,
      tableLoading: false,
      tableData: []
    };
  },
  created() {
    this.getFollowPerson();
  },
  methods: {
    choose(item) {
      this.$parent.followUp = item;
      this.$parent.customerInput.followUpEmployeeId = item.id;
      this.$set(this.$parent.customerInput, 'followUpName', item.name);
      this.search = new Api_GET_ClubEmployeeQO();
      this.followDialogVisible = false;
    },
    getFollowPerson(page) {
      this.search.Page = page || 1;
      this.search.SkipCount = (this.search.Page - 1) * this.search.MaxResultCount;
      this.search.EmployeeTypeCodes = 'Sale';
      this.search.CanTeach = null;
      this.search.IsEnabled = true;
      this.tableLoading = true;
      api_GET_ClubEmployee(this.search).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    FollowCloseDialog() {
      this.search = new Api_GET_ClubEmployeeQO();
      this.followDialogVisible = false;
    },
    // 分页
    changePage(page) {
      this.getFollowPerson(page);
    },
    changePageSize(pagesize) {
      this.search.MaxResultCount = pagesize;
      this.getFollowPerson();
    }
  }
};
</script>

<style lang="scss" scoped>
.upload_game_img.no_pointer {
  cursor: default;
}
.upload_game_img {
  width: 100px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  font-size: 20px;
  border: 1px dotted #DCDFE6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  margin: 10px 0;
}
.upload_game_img .show_img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  vertical-align: middle;
}
.title {
  height: 36px;
  line-height: 23px;
  font-size: 16px;
  font-weight: 600;
  font-family: PingFang SC, PingFang SC-Medium;
  padding-left: 9px;
  border-bottom: 2px solid #ddd;
  color: rgba(0, 0, 0, .85)
}
.radiobox {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .radio {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
  }
  .radioOuter {
    border: 1px solid #304156;
  }
  .radioOne {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-top: 5px;
    border-radius: 2px;
  }
  .oneBorder {
    border: 2px solid #1990FF;
  }
}
.classType {
  .el-form-item__content {
    height: 80px;
  }
}
.submitIt {
  margin: 30px 0px 0px 300px;
}
</style>
